<template>
  <div class="password-modify">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div slot="header">
        <span>修改密码</span>
      </div>
      <el-form
        :model="editForm"
        ref="editFormRef"
        :rules="editFormRules"
        label-width="100px"
        size="small"
      >
        <el-form-item
          label="原密码"
          prop="oldPassword"
        >
          <el-input
            type="password"
            v-model="editForm.oldPassword"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model="editForm.password"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="确认新密码"
          prop="againPassword"
        >
          <el-input
            type="password"
            v-model="editForm.againPassword"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleEditAccount"
            >确认</el-button
          >
          <el-button
            type="default"
            @click="resetForm"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { checkOldPwd, editPwd } from '@/api/user.js'
export default {
  data() {
    const checkOldPassword = async (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'))
      } else if (value.length < 5 || value.length > 10) {
        callback(new Error('长度在 5 到 10 个字符'))
      } else {
        // 检验账号是否存在
        const res = await checkOldPwd(value)
        if (res.code === 201) {
          callback(new Error(res.msg))
        } else {
          callback()
        }
      }
    }
    return {
      editForm: {
        oldPassword: '123456',
        password: '123456',
        againPassword: '123456'
      },
      editFormRules: {
        oldPassword: [
          { required: true, validator: checkOldPassword, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        againPassword: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleEditAccount() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (valid) {
          const { password, againPassword } = this.editForm
          // console.log(this.editForm)
          if (password === againPassword) {
            const res = await editPwd({ newPwd: password })
            if (res.code === 5002) {
              this.$message({
                type: 'info',
                message: res.msg
              })
            } else {
              this.$message({
                type: 'success',
                message: '密码更新成功',
                duration: 1000,
                onClose: () => {
                  this.$router.push('/login')
                }
              })
            }
          } else {
            this.$message({
              type: 'info',
              message: '2次输入的密码不一致'
            })
          }
        }
      })
    },
    resetForm() {
      this.$refs.editFormRef.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  width: 250px;
}
</style>
